<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .toggle1{
        vertical-align: top;
        width: 80px;
        display: block;
        margin: 100px auto;
    }

    .toggle1-input{
        display: none;
    }

    .toggle1-button{
        position: relative;
        display: inline-block;
        font-size: 1rem;
        line-height: 20px;
        text-transform: uppercase;
        background-color: #f2395a;
        border: 1px solid #f2395a;
        color: white;
        width: 100%;
        height: 30px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .toggle1-button::before{
        position: absolute;
        top: 5px;
        left: 38px;
        content: "off";
        display: inline-block;
        height: 20px;
        padding: 0 3px;
        background: white;
        color: #f2395a;
        transition: all 0.3s ease;
    }

    .toggle1-input:checked + .toggle1-button{
        background: #00b3b4;
        border-color: #00b3b4;
    }

    .toggle1-input:checked + .toggle1-button::before{
        left: 5px;
        content: 'on';
        color: #00b3b4;
    }
</style>
</head>
<body>
<label for="toggle1" class="toggle1">
    <input type="checkbox" id="toggle1" class="toggle1-input">
    <span class="toggle1-button"></span>
</label>

</body>
</html>